<template>
    <!-- #ifdef APP-NVUE -->
    <waterfall class="waterfall" :column-count="columnCount" :column-width="columnWidth" :left-gap="leftGap"  :right-gap="rightGap" :column-gap="columnGap" :ref="ref" :show-scrollbar="showScrollbar" :enableBackToTop="true" :scroll-y="true">
        <slot />
    </waterfall>
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
		<xg-waterfall :columnCount="columnCount" :leftGap="leftGap+'px'" :rightGap="rightGap+'px'" :columnGap="columnGap+'px'" :ref="ref">
				<slot />
		</xg-waterfall>
    <!-- #endif -->
</template>

<script>
	import xgWaterfall from '@/otherComponents/other/xg-waterfall/xg-waterfall.vue';
    export default {
			components:{
				xgWaterfall
			},
			name: 'UniWaterfall',
			props: {
				 columnCount: {
					 type: Number,
					 default: 2
				 },
				 columnWidth: {
					 type: [Number, String],
					 default: 'auto'
				 },
				 leftGap: {
					 type: Number,
					 default: 8
				 },
				 rightGap: {
					 type: Number,
					 default: 8
				 },
				 columnGap: {
					 type: Number,
					 default: 4
				 },
				 // #ifdef APP-NVUE
				 ref: {
					 type: String,
					 default: "waterfall" 
				 },
				 // #endif
				 showScrollbar: {
					 type: Boolean,
					 default: false
				 },
				 scrollY:{
					 type: Boolean,
					 default: false
				 }
			},
			data() {
				return {
					// #ifndef APP-PLUS
					ref: 'waterfall'
					// #endif
				}
			},
			methods:{
				getPage() {
					this.$emit('getPage');
				}
			}
    }
</script>


<style>
	
	.waterfall{
		flex: 1;
		/* background-color: #ebebeb; */
		justify-content: center;
	}
</style>